<template>
  <div class="contract-box" ref="contractBoxRef">
    <ContractTitle
      pageType="contract"
      @setTableH="setTableH"
      @calculateTable="calculateTable"
      @sceneTypeSearch="sceneTypeSearch"
      @threeSearch="threeSearch"
      @customerSearch="customerSearch"
      @init="ordinaryOrAdvancedRequest"
      @exportValue="exportValue"
      :exportLoading="exportLoading"
    />
    <ContractTable
      ref="crmTableRef"
      pageType="contract"
      :list="list"
      :loading="loading"
      :meterHeaderList="meterHeaderList"
      :total="total"
      :pageNo="queryParams.pageNo"
      :pageSize="queryParams.pageSize"
      :domHeight="domHeight"
      @pageNextProver="pageNextProver"
      :setTimes="setTimes"
      @ordinaryOrAdvancedRequest="ordinaryOrAdvancedRequest"
      @handleDefault="handleDefault"
      @saveTableSort="saveTableSort"
      @sortChange="sortChange"
    />
  </div>
</template>
<script setup>
import * as TableSort from '@/utils/sortTable'
import * as AdvancedQueryApi from '@/api/crm/advancedQuery/index.ts'
import * as ContractApi from '@/api/crm/contract'
import ContractTitle from '@/views/crm/components/CrmTitle/index2.vue'
import ContractTable from '@/views/crm/components/CrmTable/index2.vue'
import download from '@/utils/download'

defineOptions({ name: 'CrmContract' })

const message = useMessage()
const loading = ref(false)
const list = ref([])
const total = ref(0)
const setTimes = ref({})
const meterHeaderList = ref()
const contractBoxRef = ref(null)
const domHeight = ref(0)
const queryParams = reactive({
  pageNo: 1,
  pageSize: 30,
  moduleId: '',
  customerId: '',
  sceneType: '',
  sortStr: '',
  name: null,
  sortFields: {}
})
const crmTableRef = ref(null)
/**设置表格的高度*/
const setTableH = (val) => {
  crmTableRef.value?.setTableHeight(val)
}
const oldHeight = ref(0)
/**拿到title高度计算表格的高度*/
const calculateTable = (val) => {
  oldHeight.value = domHeight.value - val
  setTableH(domHeight.value - val)
}
/**分页*/
const pageNextProver = (val) => {
  const { page, limit } = val
  queryParams.pageNo = page
  queryParams.pageSize = limit
  getContractList()
}
/**负责的请求*/
const sceneTypeSearch = (val) => {
  queryParams.sceneType = val
  queryParams.pageNo = 1
  ordinaryOrAdvancedRequest()
}
const customerSearch = (val) => {
  queryParams.pageNo = 1
  queryParams.customerId = val
  ordinaryOrAdvancedRequest()
}
// 三和一的筛选
const threeSearch = (val) => {
  queryParams.name = null
  if (val) {
    queryParams.name = val
  }
  queryParams.pageNo = 1
  ordinaryOrAdvancedRequest()
}
/**普通搜索线索列表**/
const getContractList = async () => {
  let data
  // 排序
  if (Object.keys(queryParams.sortFields).length > 0) {
    queryParams.sortStr = JSON.stringify(queryParams.sortFields)
  }
  try {
    loading.value = true
    data = await ContractApi.getContractPage(queryParams)
    list.value = data.list
    total.value = data.total
  } finally {
    loading.value = false
  }
}
// 普通请求 还是高级请求
const ordinaryOrAdvancedRequest = () => {
  getContractList()
}
/**表头 + 自定义字段表头*/
const getFiledList = async () => {
  const tableSort = TableSort.getMeterList(TableSort.DICT.CONTRACT)
  meterHeaderList.value = [...tableSort].reduce((acc, current) => {
    if (!acc.find((item) => item.label === current.label)) {
      acc.push(current)
    }
    return acc
  }, [])
}
/** 恢复默认 */
const handleDefault = () => {
  getFiledList()
}
/**排序*/
const sortChange = (key, val) => {
  queryParams.sortFields[key] = val
  ordinaryOrAdvancedRequest()
}
/** 保存table配置 */
const saveTableSort = () => {
  TableSort.setMeterList(TableSort.DICT.CONTRACT, meterHeaderList.value)
}
onMounted(() => {
  domHeight.value = contractBoxRef.value.offsetHeight - 160
  getContractList()
  getFiledList()
})
const exportLoading = ref(false)
/**导出数据*/
const exportValue = async () => {
  try {
    // 导出的二次确认
    await message.exportConfirm()
    // 发起导出
    exportLoading.value = true
    const data = await ContractApi.exportContract(queryParams)
    download.excel(data, '合同.xls')
  } catch {
  } finally {
    exportLoading.value = false
  }
}
</script>

<style scoped lang="scss">
.contract-box {
  width: 100%;
  flex-grow: 1;
}
</style>
